<template>
	<rui-pages>
		<!-- 名称
		评分
		开园时间
		游览时长
		地址
		简介

		天气

		小贴士

		相关线路 -->

		<view class="head">
			<view class="head_mask"></view>
			<image class="head_bg" src="/static/images/lines.jpg" mode=""></image>
		</view>

		<view class="detail">
			<rui-card>

				<view class="detail_info">
					<view class="detail_info_head">
						<view class="detail_info_head_left">

							<view class="detail_info_head_left_title">
								喀纳斯景区
							</view>
							<view class="detail_info_head_left_address">
								喀纳斯风景区位于新疆维吾尔自治区布尔津县县城北部
							</view>
						</view>

						<view class="detail_info_head_right">
							<view class="detail_info_head_right_zan">
								2211
							</view>
							<view class="detail_info_head_right_comment">
								0
							</view>
						</view>
					</view>
				</view>

				<view class="detail_content">
					喀纳斯是集冰川、湖泊、森林、草原、牧场、河流、民族风情、珍稀动植物于一体的综合景区。在这里壮观的冰川映衬着宁静的湖水、茫茫的草原包容着幽深的原始森林。神秘的湖怪、古朴的土瓦人、变换的湖水、眩人的风景会让人痴迷。
				</view>
			</rui-card>
		</view>
		<!-- 天气 -->
		<rui-mdd-weather></rui-mdd-weather>
		<rui-card title="小贴士">
			保暖措施：‌喀纳斯景区冬季气温较低，‌建议游客密切关注天气变化，‌添加衣物以保持温暖。‌最外层衣物建议选择具有防风性能的，‌同时穿戴帽子、‌围巾、‌防滑鞋等保暖物件。‌随身携带防冻油膏、‌必要药物及保温杯。‌

		</rui-card>
		<!-- 线路 -->
		<rui-title title="推荐线路"></rui-title>
		<rui-lines-mini></rui-lines-mini>
	</rui-pages>
</template>

<script>

</script>

<style lang="scss" scoped>
	.head {
		height: 700rpx;
		position: relative;
		overflow: hidden;

		&_mask {
			height: inherit;
			width: 100%;
			// background-color: var(--color);
			background-image: linear-gradient(to bottom, transparent, transparent, transparent, transparent, rgba(247, 248, 249, .3), rgba(247, 248, 249, .6), rgba(247, 248, 249, 1), rgba(247, 248, 249, 1));
			background-size: cover;
			position: relative;
			z-index: 1;
		}

		&_bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 600rpx;
			// z-index: -1;
			// vertical-align: middle;
			// mix-blend-mode: multiply;
			animation: zoom 10s infinite ease-in-out;
		}
	}

	@keyframes zoom {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.3);
		}
	}

	.detail {
		position: relative;
		z-index: 9;
		margin-top: -250rpx;
		&_content {
			line-height: 55rpx;
			text-indent: 2rch;
		}

		&_info {

			&_head {
				display: flex;
				justify-content: space-between;
				margin-bottom: 40rpx;

				&_left {
					&_title {
						font-size: 36rpx;
						font-weight: bold;
						color: var(--color);
					}

					&_address {
						font-size: 24rpx;
						color: #999;
						width: 80%;
						margin-top: 10rpx;
					}
				}

				&_right {
					width: 150rpx;

					&_zan {
						font-size: 36rpx;

						&::after {
							content: "赞";
							font-size: 24rpx;
						}
					}

					&_comment {
						font-size: 24rpx;

						&::after {
							content: "条评论";
						}
					}
				}
			}
		}
	}
</style>